<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<!-- CSS -->

<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/datepicker.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/typeahead.css">
<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/slick.grid.css">

<!--   <link rel="stylesheet" type="text/css" media="screen" href="libs/SlickGrid-2.0.2/css/smoothness/jquery-ui-1.8.16.custom.css" /> -->
<!--  	<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.22.custom.css" />   -->

<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/controls/slick.pager.css">
<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/controls/slick.columnpicker.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <script src="libs/jquery/jquery-1.7.2.js"></script>
	<script src="libs/ember/handlebars-1.0.rc.1.js"></script>
<!--   <script src="libs/ember/ember.js"></script> -->
  <script src="libs/ember/ember-1.0.pre.js"></script>

<!--   <script src="libs/ember/ember-data.js"></script> -->

	<script src="libs/SlickGrid-2.0.2/lib/jquery.event.drag-2.0.min.js"></script>
	<script src="libs/SlickGrid-2.0.2/lib/jquery.event.drop-2.0.min.js"></script>
	<script src="libs/SlickGrid-2.0.2/lib/jquery-ui-1.8.16.custom.min.js"></script>
	<script src="libs/SlickGrid-2.0.2/slick.core.js"></script>
	<script src="libs/SlickGrid-2.0.2/plugins/slick.rowselectionmodel.js"></script>
	<script src="libs/SlickGrid-2.0.2/slick.dataview.js"></script>
	<script src="libs/SlickGrid-2.0.2/controls/slick.pager.js"></script>
	<script src="libs/SlickGrid-2.0.2/controls/slick.columnpicker.js"></script>
	<script src="libs/SlickGrid-2.0.2/plugins/slick.rowselectionmodel.js"></script>
	<script src="libs/SlickGrid-2.0.2/plugins/slick.cellselectionmodel.js"></script>
	<script src="libs/SlickGrid-2.0.2/slick.formatters.js"></script>
	<script src="libs/SlickGrid-2.0.2/slick.editors.js"></script>
	<script src="libs/SlickGrid-2.0.2/slick.grid.js"></script>
	<script src="libs/jquery/jquery.ba-tinypubsub.js"></script>

  <script src="libs/bootstrap/js/bootstrap.js"></script>
  <script src="libs/bootstrap/js/bootstrap-datepicker.js"></script>
  <script src="libs/bootstrap/js/bootstrap-typeahead.js"></script>
  
  <script src="tagspicker.js"></script>
  
	<script src="app.js"></script>
	
	 <script type="text/x-handlebars" data-template-name="application">
     {{outlet}}
   </script>
   
   <script type="text/x-handlebars" data-template-name="entry">
      {{#if App.userInfo}}
        {{#if App.userInfo.userId}}
          email: {{App.userInfo.email}}
        {{else}}
          not logged in. please <a {{action "login"}}">login</a> 
        {{/if}}
      {{else}}
        please wait...
      {{/if}}
   </script>
	
<!--       <img class="logo" src="its3.png" width="105px" height="38px"/> -->
<!--       <p class="logotext">manager</p> -->
<!-- <div class="its-header header-shadow"> -->
<!-- </div> -->
	<script type="text/x-handlebars" data-template-name="main">
    
      <div class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-inner">
          <a class="brand" href="#">
            <img src="its3.png" width="50px" height="20px"/>
            manager
          </a>
          <ul class="nav">
            {{#each item in content}}
              <li {{bindAttr class="item.isActive:active"}}><a {{action "doItem" "item"}}>{{item.label}}</a></li>
            {{/each}}
          </ul>
          <form class="navbar-search pull-right">
            <input type="text" class="search-query" placeholder="Search">
            &nbsp;&nbsp;&nbsp;
            <font size="2">
            {{App.userInfo.email}}
            </font>
            &nbsp;&nbsp;&nbsp;
            
            <a {{action "logout"}} style="margin-top:0;color:grey;font-size:70%">Logout</a>
          </form>
        </div>
      </div>
    
    <div class="its-content">
      {{outlet}}
    </div>
  </script>

	<script type="text/x-handlebars" data-template-name="trades">
      <div>
        {{outlet}}
      </div>
  </script>

  <script type="text/x-handlebars" data-template-name="tradesList">

    <a class="btn btn-large" {{action "doNewTrade"}} href="#"><i class="icon-plus"></i> New Trade</a>
    <br><br>
    {{#if empty}}
    No trades yet!
    {{else}}
    <div class="tablewrapper" style="width:100%;font-size:90%">
    <table class="table table-condensed table-striped table-bordered table-shadow">
      <thead>
      <tr class="tableheader">
        <th>ID</th>
        <th>Account</th>
        <th>Created</th>
        <th>Settlement Date</td>
        <th>Stage Type</td>
        <th>Symbol</td>
        <th>Position Type</td>
        <th>Quote Price</td>
        <th>Initial Quantity</th> 
        <th>Previous Quantity</td>

        <th>Block Trade</th>
        <th>Broker</th>
        <th>Cash Account</th> 
        <th>Counterparty</td>
        <th>Effective Time</td>
        <th>Expires</td>
        <th>Settlement Currency</th>
        <th>Tags</td>
        <th>Trade Date</th> 
        <th>Trade Id</td>
        <th>Version</td>
      </tr>
      </thead>
      <tbody>
      {{#each item in content}}
      <tr>
        <td>{{item.id}}</td>
        <td>{{item.parent}}</td>
        <td>{{item.creationTimestamp}}</td>
        <td>{{item.settlementDate}}</td>
        <td>{{item.stageType}}</td>
        <td>{{item.symbolKey}}</td>
        <td>{{item.positionType}}</td>
        <td>{{item.quotePrice}}</td>
        <td>{{item.quantityInitial}}</td>  
        <td>{{item.quantityPrevious}}</td>

        <td>{{item.blockTradeKey}}</td> 
        <td>{{item.brokerKey}}</td> 
        <td>{{item.cashAccountKey}}</td>  
        <td>{{item.counterpartyKey}}</td>
        <td>{{item.effectiveTimestamp}}</td>
        <td>{{item.expirationTimestamp}}</td>
        <td>{{item.settlementCurrency}}</td> 
        <td>{{item.tags}}</td>
        <td>{{item.tradeDate}}</td>  
        <td>{{item.tradeId}}</td>
        <td>{{item.version}}</td>
      </tr>
      {{/each}}
      </tbody>
    </table>
    {{/if}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="newTrade">

<form class="form-horizontal form-actions table-shadow">
  <legend>Create a Trade</legend>
  {{view App.StageTypeField label="Stage Type" required=true valueBinding="model.stageType"}}
  {{view App.NumberField label="Quantity" required=true valueBinding="model.quantity"}}
  {{view App.NumberField label="Price" required=true valueBinding="model.price"}}
  {{view App.SymbolField label="Symbol" required=true valueBinding="model.symbol"}}
  {{view App.AccountField label="Account" required=true valueBinding="model.account"}}
  {{view App.DateField label="Settlement Date" required=true valueBinding="model.sdate"}}
  <div class="form-actions">
    <button type="button" class="btn btn-primary" {{action "doCreate" "controller"}}><i class="icon-ok icon-white"></i> Create Trade</button>
    <button type="button" class="btn" {{action "doCancel"}}>Cancel</button>
  </div>
</form>

  </script>
  
  
  
  
  
  
  
  <script type="text/x-handlebars" data-template-name="accounts">
      <div>
        {{outlet}}
      </div>
  </script>

  <script type="text/x-handlebars" data-template-name="accountsList">
    <a class="btn btn-large" {{action "doConnectAccount"}} href="#"><i class="icon-plus"></i> Add Account</a>
    <br><br>
    {{#if empty}}
    No Accounts added yet!
    {{else}} 
    <div class="tablewrapper" style="width:800px">
    <table class="table table-condensed table-striped table-bordered table-shadow">
      <thead>
      <tr class="tableheader">
        <th>Name</th>
        <th>Tags</th>
      </tr>
      </thead>
      <tbody>
      {{#each item in content}}
      <tr>
        <td>{{item.name}}</td>
        <td>{{item.defaultTags}}</td>
      </tr>
      {{/each}}
      </tbody>
    </table>
    {{/if}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="connectAccount">

<form class="form-horizontal form-actions  table-shadow">
  <legend>Add a Bank Account</legend>
  {{view App.TextField label="Name" required=true valueBinding="model.name"}}
  {{view App.TagsFormField label="Tags" valueBinding="model.defaultTags"}}
  <div class="form-actions">
    <button type="button" class="btn btn-primary" {{action "doCreate" "controller"}}><i class="icon-ok icon-white"></i> Add the Account</button>
    <button type="button" class="btn" {{action "doCancel"}}>Cancel</button>
  </div>
</form>

  </script>
  
  
  
  

	<script type="text/x-handlebars" data-template-name="history">
      <h1>History view not implemented yet</h1>
  </script>

	<script type="text/x-handlebars" data-template-name="cash">
      <h1>Cash view not implemented yet</h1>
  </script>

</body>

</html>


<!--   {{view App.TextField label="Symbol" required=true valueBinding="symbol"}} -->

